(function () {

    class contentSlide {
        constructor({ item }) {
            this.contentSlide = item; //轮播图主体

            // content-slide-sel
            this.slideSel = this.contentSlide.find('.content-slide-sel');
            this.slideSelUl = this.contentSlide.find('.content-slide-sel ul');

            // slide-wrap
            this.slideCar = this.contentSlide.find('.slide-wrap .slideshow-Car');
            this.slideCarUl = this.contentSlide.find('.slide-wrap .slideshow-Car ul');
            this.slideCarLi = this.contentSlide.find('.slide-wrap .slideshow-Car ul li');

            //slide-btn-wrap
            this.slideBtnWrap = this.contentSlide.find('.slide-btn-wrap');


            this.autoSizeFun(); //根据窗口大小来调整元素大小，来达到响应式的效果
            this.CarLiWidth = this.slideCarLi.width();
            this.slideing = false;//判断是否在滑动，每次只能执行一次滑动效果
            this.timer;//自动轮播时钟

            this.init();

        }
        init() {
            var self = this;
            this.slideSel.on('click', 'li', function () {
                self.selConvert(this)
            })

            this.slideBtnWrap.on('click', 'a', function () {
                self.slideConvert(this)
            })

            this.autoSlide()
            this.autoSize();

        }

        // 处理跳转至请求的函数，根据 btn的class值求出参数并调用 slide函数
        // 初始值：拿到 class='on'的图片的index值,
        // 移动后的index： 点击上一张就 初始值-1 ，下一张则 +1
        slideConvert(btn) {
            btn = btn || this.slideBtnWrap.find('a')[1]; //做自动轮播调用的兼容处理，如果没有传入btn值，默认选择向右切换按钮
            var curIndex = this.slideCarUl.find('li.on').attr('index');
            curIndex = parseInt(curIndex);
            if (btn.className == 'next') {
                var nextIndex = (curIndex + 1 + 8) % 8;
            } else {
                var nextIndex = (curIndex - 1 + 8) % 8;
            }
            this.slide(curIndex, nextIndex);
        }

        // 处理选择图片按钮的函数
        // 初始值：拿到 class='on'的图片的index值,
        // 移动后的index:被点击的按钮的index值
        selConvert(btn) {
            var curIndex = this.slideCarUl.find('li.on').attr('index');
            var nextIndex = btn.getAttribute('index');
            nextIndex = parseInt(nextIndex);
            curIndex = parseInt(curIndex);
            this.slide(curIndex, nextIndex);
        }

        // 移动幻灯片位置 
        // 1.拿到当前幻灯片的left值 ：curLeft
        // 2.算出移动后的幻灯片的left值 ：nextLeft
        // 3.然后调用过度动画slideAnimate 将参数传进去
        // 4.根据移动后的index值，把当前图片的 选择图片按钮，包裹图片的li设置为显示状态
        slide(curIndex, nextIndex) {
            if (this.slideing) return;//判断函数如果在运行状态，则退出函数
            this.slideing = true; //执行滑动操作前，把 slideing设为运行状态

            var imgList = this.slideCarUl[0];

            var curLeft = curIndex * (this.CarLiWidth * -1);
            var nextLeft = nextIndex * (this.CarLiWidth * -1);
            this.slideAnimate(curLeft, nextLeft, imgList, 600);

            if (nextIndex == (this.slideCarLi.length - 1)) {
                nextIndex = 1;
            } else if (nextIndex == 0) {
                nextIndex = (this.slideCarLi.length - 2);
            }

            // 把li标签和span标签的选中的那个标签的class的 on设置一下。
            this.slideCarLi[curIndex].className = "";
            this.slideCarLi[nextIndex].className = "on";


            this.slideCar.animate({
                height: $(this.slideCarLi[nextIndex]).height()
            }, 600)

            this.resetUL(this.slideSelUl.find(`li[index="${nextIndex}"]`)[0]);
        };


        // 移动动画效果 计算出每毫秒的滑动距离，然后根据已经过去的时间设置left值
        /**
        *  @description 产生过度动画效果
        *  @param {number} curLeft 初始位置
        *  @param {number} nextLeft 移动后的位置
        *  @param {HTMLElemnet} element 要进行动画的元素
        *  @param {number} nextLeft 动画的过度时间
        */
        slideAnimate(curLeft, nextLeft, element, decoration) {
            var distance = nextLeft - curLeft;// 总的滑动的距离
            var distanceMS = distance / decoration;//每毫秒需要滑动的距离
            var startTime = Date.now();
            var timer = setInterval(() => {
                this.autoSlide();//在运行滑动动画时，重置自动轮播timer
                var pasTime = Date.now() - startTime
                element.style.left = curLeft + pasTime * distanceMS + 'px';
                if (pasTime >= decoration) {
                    this.resizeInit();
                    this.slideing = false; //执行完滑动操作后，把 slideing设为静止状态
                    if (element.style.left == this.CarLiWidth * (this.CarLiWidth.length - 1) * -1) {
                        element.style.left = this.CarLiWidth * -1 + 'px';
                    } else if (element.style.left == '0px') {
                        element.style.left = this.CarLiWidth * (this.CarLiWidth.length - 2) * -1 + 'px';
                    }
                    clearInterval(timer);
                }
            }, 1000 / 60)
        }

        //自动轮播
        autoSlide() {
            // 先去掉时钟。
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }

            // 实现自动滚动效果。
            this.timer = setInterval(() => {
                // this.slideConvert();
            }, 3000);
        }

        // 调整屏幕大小后自动调整 slide-img-wrap的left 
        resizeInit() {
            var curIndex = this.slideCarUl.find('li.on').attr('index');
            curIndex = parseInt(curIndex);
            this.slideCarUl.css('left', curIndex * -1 * this.CarLiWidth + 'px');
        }


        resetUL(li) {
            this.slideSelUl.find('li.on').removeClass('on');
            $(li).addClass('on');

            var itemX = li.getBoundingClientRect().x;
            var newX = document.documentElement.clientWidth / 2 - li.getBoundingClientRect().width / 2;
            var distance = newX - itemX;

            this.SelAnimate(distance, 300);
        }


        // 移动动画效果 计算出每毫秒的滑动距离，然后根据已经过去的时间设置left值
        /**
        *  @description 产生过度动画效果
        *  @param {number} distance 需要滑动的距离
        *  @param {number} decoration 动画的过度时间
        */
        SelAnimate(distance, decoration) {
            var distanceMS = distance / decoration;//每毫秒需要滑动的距离

            //初始 left位置
            var curLeft = this.slideSelUl.css('left').slice(0, -2);
            curLeft = parseInt(curLeft);

            var startTime = Date.now();
            var timer = setInterval(() => {
                var pasTime = Date.now() - startTime;

                var newLfet = curLeft + pasTime * distanceMS;

                if (newLfet > 0) {
                    this.slideSelUl.get(0).style.left = '0px';
                    clearInterval(timer);
                    return;
                }

                var minLeft = this.slideSel.css('width').slice(0, -2) * 1 - this.slideSelUl.css('width').slice(0, -2) * 1;
                if (newLfet < minLeft) {
                    if (minLeft < 0) {
                        this.slideSelUl.get(0).style.left = minLeft + 'px';
                    } else {
                        this.slideSelUl.get(0).style.left = '0px';
                    }
                    clearInterval(timer);
                    return;
                }

                this.slideSelUl.get(0).style.left = newLfet + 'px';

                if (pasTime >= decoration) {
                    this.slideSelUl.get(0).style.left = curLeft + distance + 'px';
                    clearInterval(timer);
                }
            }, 1000 / 60)
        }


        // 防抖调用元素大小函数
        autoSize() {
            var timer = null;
            var self = this;
            $(window).resize(function () {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(self.autoSizeFun.bind(self), 300);
            })
        }

        //调整元素大小函数 ，来达到响应式的效果
        autoSizeFun() {
            var newWidth = this.slideCar.width();
            this.slideCarLi.css('width', newWidth + 'px');
            this.slideCarUl.css('width', newWidth * this.slideCarLi.length + 'px');
            this.CarLiWidth = newWidth;
            this.slideBtnWrap.css('top', this.slideCarLi.find('a img').height() / 2);


            this.resizeInit();
            setTimeout(() => {
                var newWidth = this.slideCar.width();
                this.slideCarLi.css('width', newWidth + 'px');
                this.slideCarUl.css('width', newWidth * this.slideCarLi.length + 'px');
                this.CarLiWidth = newWidth;
                this.slideBtnWrap.css('top', this.slideCarLi.find('a img').height() / 2);
                this.slideCar.animate({
                    height: $(this.slideCarUl.find('li.on')).height()
                }, 600)
            }, 333)
        }
    }




    $(function () {
        new contentSlide({
            item: $(".content-slide")
        });
    });



})();